<!-- 开发部：物料属性定义 蹇泽阳 -->
<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :searchImg="false" />
    <div class="container" v-if="!showClassify">
      <div class="flex">
        <el-card shadow="never" :body-style="{ padding: '20px 0px 20px 10px' }" style="width: 20%">
          <div slot="header" class="mb9 f16 flex header">
            <el-button type="primary" size="default" @click="classifyClick" class="primaryBth">分类建档</el-button>
            <el-button type="primary" size="default" @click="copyClick" class="primaryBth">复制</el-button>
            <el-button type="primary" size="default" @click="pasteClick" class="primaryBth">粘贴</el-button>
            <!-- <span class="ml20 f14">双击小类复制</span> -->
          </div>
          <div class="flex">
            <Table :tableData="tableData" :tableHeader="tableHeader" class="mr5" @currentRow="currentRow" />
            <Table :tableData="tableData2" :tableHeader="tableHeader2" class="mr5" @currentRow="currentRow2" />
            <Table :tableData="tableData3" :tableHeader="tableHeader3" @currentRow="currentRow3" />
          </div>
        </el-card>

        <el-card shadow="never" :body-style="{ padding: '20px 5px 20px' }">
          <div slot="header" class="mb9 f16">
            <span style="font-weight: 600">材料属性</span>
            <JDialog :tableHeader="tableHeader4" :tableData="tableData4" :width="50" @confirm="dialogConfirm" :unSub="true"> </JDialog>
          </div>
          <Table :tableData="tableData4" :tableHeader="tableHeader4" />
        </el-card>

        <el-card shadow="never" :body-style="{ padding: '20px 5px 20px' }">
          <div slot="header" class="mb9 f16">
            <div class="flex">
              <span style="font-weight: 600">材料属性定义</span>
              <JDialog :tableHeader="tableHeader5" :tableData="tableData5" @confirm="dialogConfirm2" :unSub="true"> </JDialog>
            </div>
          </div>

          <Table :tableData="tableData5" :tableHeader="tableHeader5" @currentRow="currentRow4" />
        </el-card>

        <el-card shadow="never" :body-style="{ padding: '20px 5px 20px' }">
          <div slot="header" class="mb9 f16">
            <div class="flex">
              <span style="font-weight: 600">材料属性关联规格</span>
              <JDialog :tableHeader="tableHeader6" :tableData="tableData6" @confirm="dialogConfirm3" :unSub="true"> </JDialog>
            </div>
          </div>
          <Table :tableData="tableData6" :tableHeader="tableHeader6" :outTableHeight="100" />
        </el-card>

        <el-card shadow="never" :body-style="{ padding: '20px 5px 20px' }">
          <div slot="header" class="mb9 f16">
            <div class="flex">
              <span style="font-weight: 600">宽幅定义</span>
              <JDialog :tableHeader="tableHeader7" :tableData="tableData7" :width="40" @confirm="dialogConfirm4" :unSub="true"> </JDialog>
            </div>
          </div>
          <Table :tableData="tableData7" :tableHeader="tableHeader7" :outTableHeight="100" />
        </el-card>

        <el-card shadow="never" :body-style="{ padding: '20px 5px 20px' }">
          <div slot="header" class="mb9 f16">
            <div class="flex">
              <span style="font-weight: 600">单位定义</span>
              <JDialog :tableHeader="tableHeader8" :tableData="tableData8" :width="30" @confirm="dialogConfirm5" :unSub="true"> </JDialog>
            </div>
          </div>
          <Table :tableData="tableData8" :tableHeader="tableHeader8" />
        </el-card>

        <el-card shadow="never" :body-style="{ padding: '20px 5px 20px' }">
          <div slot="header" class="mb9 f16">
            <div class="flex">
              <span style="font-weight: 600">贴合加工方式定义</span>
              <JDialog :tableHeader="tableHeader9" :tableData="tableData9" :width="30" @confirm="dialogConfirm6" :unSub="true"> </JDialog>
            </div>
          </div>
          <Table :tableData="tableData9" :tableHeader="tableHeader9" />
        </el-card>
      </div>
    </div>
    <Classify v-else />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import LoginWork from '@/utils/LoginWork'
import { selectList } from '@/plugins/mixin'
import { formateData } from '@/plugins/mixinJ'
import { ElMessage } from 'element-plus'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'MaterialProperty'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import service from '@/utils/request'
import Classify from './components/Classify.vue'
import { onMounted, watch, onBeforeMount } from 'vue'
const showClassify = ref(false)
const mtlProperty = ref([])

const tableHeader = ref([
  {
    label: '大类',
    prop: 'typeName',
    width: 100
  }
])
const tableHeader2 = ref([
  {
    label: '中类',
    prop: 'typeName',
    width: 100
  }
])
const tableHeader3 = ref([
  {
    label: '小类',
    prop: 'typeName',
    width: 100
  }
])
const tableHeader4 = ref([
  {
    type: 'select',
    label: '材料属性',
    prop: 'mtlProperty',
    disable: true,
    options: mtlProperty
  },
  {
    type: 'checkbox',
    label: '必选否',
    prop: 'mtlNoNeed'
  },
  {
    label: '名称组成顺序',
    prop: 'propertySeq'
  },
  {
    type: 'checkbox',
    label: '是否编码',
    prop: 'propertyNeed'
  }
])
const tableHeader5 = ref([
  {
    label: '序号',
    prop: 'seqNo',
    width: '50'
  },
  {
    label: '材料属性',
    prop: 'mtlProperty'
  }
])
// 材料属性关联规格
const tableHeader6 = ref([
  {
    label: '编号',
    prop: 'mtlSeq',
    width: 50
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  }
])
const tableHeader7 = ref([
  {
    label: '编码',
    prop: 'mtlSeq',
    width: 50
  },
  {
    label: '宽幅',
    prop: 'mtlSpec',
    width: 100
  },
  {
    label: '序号',
    prop: 'seqNo',
    width: 50
  }
])
const tableHeader8 = ref([
  {
    label: '编码',
    prop: 'mtlSeq',
    width: 50
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  }
])
const tableHeader9 = ref([
  {
    label: '序号',
    prop: 'seqNo',
    width: 50
  },
  {
    label: '加工方式',
    prop: 'prdType'
  }
])
const tableData = ref([])
const tableData2 = ref([])
const tableData3 = ref([])
const tableData4 = ref([])
const tableData5 = ref([])
const tableData6 = ref([])
const tableData7 = ref([])
const tableData8 = ref([])
const tableData9 = ref([])

const classifyClick = () => {
  showClassify.value = true
}

onMounted(() => {
  DepartmentalData(0)
})
const DepartmentalData = async (choose: number) => {
  let resolve = []
  // if (choose === 0) {
  resolve = await service.get<any, any>('/material/mtl/property/mtlPropertyListTree')
  // } else {
  //   resolve = await service.get<any, any>(`/material/mtl/property/sdCustTypeAVen?choose=${choose}`)
  // }
  tableData.value = resolve.map((item: any) => {
    return item
  })
  currentRow()
}
const currentTable1Row = ref({}) as any
const currentRow = (row: any = tableData.value[0]) => {
  tableData2.value = row.children
  currentTable1Row.value = row
  currentRow2()
}

const currentTable2Row = ref({}) as any
const currentRow2 = (row: any = tableData2.value[0]) => {
  tableData3.value = row.children
  currentTable2Row.value = row
  currentRow3()
}

const currentTable3Row = ref({}) as any
const currentRow3 = async (row: any = tableData3.value[0]) => {
  const res = await LoginWork.post<any, any>('/material/mtl/property/sdMtlTypeDetailList', {
    typeName: currentTable1Row.value.typeName,
    typeName2: currentTable2Row.value.typeName,
    typeName3: row.typeName,
    typeNo: currentTable1Row.value.typeNo,
    typeNo2: currentTable2Row.value.typeNo,
    typeNo3: row.typeNo
  })
  tableData4.value = res.data.map((item: any) => {
    item.mtlProperty = {
      selectValue: item.mtlProperty || '',
      options: mtlProperty.value
    }
    item.mtlNoNeed === null ? (item.mtlNoNeed = false) : (item.mtlNoNeed = true)
    item.propertyNeed === null ? (item.propertyNeed = false) : (item.propertyNeed = true)
    item.disable = true
    return item
  })
  // tableData4.value = row.children
  currentTable3Row.value = row
}
// 材料属性添加确认
const dialogConfirm = async (obj: any, dialogVisible: any) => {
  const copyData = formateData([obj])
  console.log(copyData[0].mtlProperty)
  const res = (await LoginWork.post(`/material/mtl/property/insertSdMtlTypeDetail`, {
    ...copyData[0],
    typeName: currentTable1Row.value.typeName,
    typeName2: currentTable2Row.value.typeName,
    typeName3: currentTable3Row.value.typeName,
    typeNo: currentTable1Row.value.typeNo,
    typeNo2: currentTable2Row.value.typeNo,
    typeNo3: currentTable3Row.value.typeNo,
    mtlProperty: copyData[0].mtlProperty.split('  ')[0],
    seqNo: copyData[0].mtlProperty.split('  ')[1]
  })) as any
  if (res.code === 200) {
    JMessage.success('新增成功')
    dialogVisible.value = false
    currentRow(currentTable1Row.value)
  } else {
    JMessage.error('新增失败')
  }
}
// 材料属性定义添加确认
const dialogConfirm2 = async (obj: any, dialogVisible: any) => {
  const res = (await LoginWork.put(`/material/mtl/property/insertProperty?code=${obj.seqNo}&name=${obj.mtlProperty}&choose=${1}`)) as any
  if (res.code === 200) {
    JMessage.success('新增成功')
    dialogVisible.value = false
    getSelectList()
  } else {
    JMessage.error('新增失败')
  }
}
const currentTable5Row = ref({}) as any
const currentRow4 = async (row: any = tableData5.value[0]) => {
  const res = (await service.get(`/material/mtl/property/mtlPropertyRD?typeName=${row.mtlProperty}`)) as any
  tableData6.value = res
  currentTable5Row.value = row
}
// 材料属性关联规格添加确认
const dialogConfirm3 = async (obj: any, dialogVisible: any) => {
  console.log(obj, currentTable5Row.value)
  if (Number(obj.mtlSeq) > 100) return JMessage.error('编号不能大于100')
  const res = (await LoginWork.post(
    `/material/mtl/property/insertPropertyDetail?mtlName=${currentTable5Row.value.mtlProperty}&seqNo=${obj.mtlSeq}&spec=${obj.mtlSpec}`
  )) as any
  if (res.code === 200) {
    JMessage.success('新增成功')
    dialogVisible.value = false
    currentRow4(currentTable5Row.value)
  } else {
    JMessage.error('新增失败')
  }
}
// 宽幅定义添加
const dialogConfirm4 = async (obj: any, dialogVisible: any) => {
  console.log(obj)
  const res = (await LoginWork.put(
    `/material/mtl/property/insertProperty?code=${obj.mtlSeq}&name=${obj.mtlSpec}&choose=${2}&seqNo=${obj.seqNo}`
  )) as any
  if (res.code === 200) {
    JMessage.success('新增成功')
    dialogVisible.value = false
    getSelectList()
  } else {
    JMessage.error('新增失败')
  }
}
// 单位定义添加
const dialogConfirm5 = async (obj: any, dialogVisible: any) => {
  console.log(obj)
  const res = (await LoginWork.put(`/material/mtl/property/insertProperty?code=${obj.mtlSeq}&name=${obj.mtlUnit}&choose=${3}`)) as any
  if (res.code === 200) {
    JMessage.success('新增成功')
    dialogVisible.value = false
    getSelectList()
  } else {
    JMessage.error('新增失败')
  }
}
// 贴合加工方式定义添加
const dialogConfirm6 = async (obj: any, dialogVisible: any) => {
  console.log(obj)
  const res = (await LoginWork.put(`/material/mtl/property/insertProperty?code=${obj.seqNo}&name=${obj.prdType}&choose=${4}`)) as any
  if (res.code === 200) {
    JMessage.success('新增成功')
    dialogVisible.value = false
    getSelectList()
  } else {
    JMessage.error('新增失败')
  }
}

// 表格下拉框获取数据
const getSelectList = async () => {
  const res = (await service.get('/material/mtl/property/mtlPropertyList')) as any
  mtlProperty.value = res.properties.map((item: any) => {
    return {
      label: item.mtlProperty,
      value: `${item.mtlProperty}  ${item.seqNo}`, //中间空两个
      LeftLabel: `${item.seqNo}`,
      RightLabel: `${item.mtlProperty}`
    }
  })
  // 材料属性定义
  tableData5.value = res.properties
  currentRow4()
  // 宽幅
  tableData7.value = res.spec
  // 单位定义
  tableData8.value = res.unit
  // 贴合加工方式定义
  tableData9.value = res.prdType
}
onBeforeMount(() => {
  getSelectList()
})

// 复制按钮
const copyData4 = ref([]) as any
const copyClick = async () => {
  copyData4.value = formateData(tableData4.value)
  JMessage.success('复制成功')
}
// 粘贴按钮
const pasteClick = () => {
  const promises = copyData4.value.map((item: any, index: number) => {
    return new Promise(async (resolve, reject) => {
      const res = (await LoginWork.post(`/material/mtl/property/insertSdMtlTypeDetail`, {
        ...copyData4.value[index],
        typeName: currentTable1Row.value.typeName,
        typeName2: currentTable2Row.value.typeName,
        typeName3: currentTable3Row.value.typeName,
        typeNo: currentTable1Row.value.typeNo,
        typeNo2: currentTable2Row.value.typeNo,
        typeNo3: currentTable3Row.value.typeNo
      })) as any
      if (res.code === 200) {
        resolve(res)
      } else {
        reject(res)
      }
    })
  })
  console.log(promises)
  Promise.all(promises)
    .then((res) => {
      console.log(res)
      JMessage.success('粘贴成功')
      currentRow3(currentTable3Row.value)
    })
    .catch((err) => {
      console.log(err)
      JMessage.error('粘贴失败')
    })
}
</script>

<style lang="less" scoped></style>
